import "./App.css";
import Component from "./preview/src/index";
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
import material from "./preview/protocol/material";

const context = require.context("./preview/mock", false, /\.(js|ts)$/);
let modules = {};
context.keys().map((filePath) => {
  const filename = filePath.replace(/^\.\/|\.(js|ts)+$/g, "");
  modules[filename] = context(filePath).default;
});

function parseLocationSearch(search = "?") {
  const param = {};
  search?.replace(/([^?&]+)=([^?&]+)/g, function (s, v, k) {
    param[v] = decodeURIComponent(k);
    return k + "=" + v;
  });
  return param;
}

function App() {
  const params = parseLocationSearch(window.location.search);
  const props = modules[params?.mock] || material?.initProps;
  console.log("props", props);
  return (
    <div className="App">
      <PanelGroup autoSaveId="example" direction="horizontal" className="box">
        <Panel defaultSize={50}>
          <h2>预览</h2>
          <Component {...props} />
        </Panel>
        <PanelResizeHandle />
        <Panel>
          <h2>配置</h2>
        </Panel>
        <PanelResizeHandle />
        <Panel defaultSize={10}>
          <h2>数据</h2>
        </Panel>
      </PanelGroup>
      ;
    </div>
  );
}

export default App;
